import { UseTable } from '@/components';
import { getStr, getTitleDiv,getKey } from '@/components/function';
import MembersController from '@/services/Members/MembersController';
import ScheduleItemsController from '@/services/scheduleItems/ScheduleItemsController';
import { Collapse, Descriptions, List,Table,Popover } from 'antd';
import {educationList,sexList,roleList,targsList} from '@/components/function/globalData'
import React from 'react';
import moment from 'moment';
import ReveiwDetail from './ReveiwDetail'
import EvaluationController from '@/services/Evaluation/EvaluationController';
const {Panel} = Collapse
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:props.rowData,
            panelKey:'one'
         };
    }

    componentDidMount(){
    }
    getMembers=(query)=>{
        let {data} = this.state
        query.projectCode = data.projectCode
        return MembersController.getList(query)
    }
    getScheduleItems=(query)=>{
        let {data} = this.state
        query.projectCode = data.projectCode
        return ScheduleItemsController.getList(query)
    }
    getEvaluationList=(query)=>{
        let {data} = this.state
        query.projectCode = data.projectCode
        return EvaluationController.getEvaluationPage(query)
    }
    getone=()=>{
        let {data} = this.state
        return(
            <div>
                <div>
                    {getTitleDiv('基本信息')}
                    <Descriptions>
                        <Descriptions.Item label={"课题名称"}>{data.projectName}</Descriptions.Item>
                        <Descriptions.Item label={"课题负责人"}>{data.projectLeaderName}</Descriptions.Item>
                        <Descriptions.Item label={"申请时间"}>{data.createdAt}</Descriptions.Item>
                        <Descriptions.Item label={"申请人"}>{data.createdBy}</Descriptions.Item>
                        <Descriptions.Item label={"被建议部门"}>{data.proposalDepartment.split("/")[1]}</Descriptions.Item>
                    </Descriptions>
                </div>
                <div>
                    {getTitleDiv('建议名称')}
                    <div style={{wordWrap: 'break-word',whiteSpace : 'normal'}}>
                    <pre style={{whiteSpace:'pre-wrap',wordWrap:'break-word'}}>{data.proposalName}</pre>
                    </div>
                </div>
                <div>
                    {getTitleDiv('存在问题')}
                    <div style={{wordWrap: 'break-word',whiteSpace : 'normal'}}>
                    <pre style={{whiteSpace:'pre-wrap',wordWrap:'break-word'}}>{data.problemDescription}</pre>
                    </div>
                </div>
                <div>
                    {getTitleDiv('具体措施')}
                    <div style={{wordWrap: 'break-word',whiteSpace : 'normal'}}>
                    <pre style={{whiteSpace:'pre-wrap',wordWrap:'break-word'}}>{data.proposal}</pre>
                    </div>
                </div>
            </div>
        )

    }
    
    getTwo=()=>{
        const columns = [
            {title:'姓名',dataIndex:'name'},
            {title:'性别',dataIndex:'sex',render:text=>getKey(text,sexList)},
            {title:'出生日期',dataIndex:'birthday'},
            {title:'学历',dataIndex:'education'},
            {title:'省级部门',dataIndex:'provinceDepartmentName'},
            {title:'市级部门',dataIndex:'cityDepartmentName'},
            {title:'角色',dataIndex:'roleName',},
        ]
        return<UseTable getData={this.getMembers} columns={columns} />
    }

    getThree=()=>{
        let {data} = this.state
        let dataSource = JSON.parse(data.fileItems)
        const columns = [
            {title:'序号',dataIndex:'url',render:(text,row,index)=>index+1},
            {title:'文件名',dataIndex:'fileName'},
            {title:'描述',dataIndex:'description',render:text=>getStr(text)},
            {title:'操作',dataIndex:'url',render:(text,row,index)=><a href={text} target="_blank">下载</a>},
        ]
        return<Table columns={columns} dataSource={dataSource}/>
       
    }



    onCollapseChange=(e)=>{
        this.setState({
            panelKey:e
        })
    }
    showEvaluationDetail=()=>{}
    getRview=()=>{
        let {data} = this.state
        return <ReveiwDetail projectCode={data.projectCode}></ReveiwDetail>
    }
 
    showEvaluationDetail=(text)=>{
        let data = JSON.parse(text)
        let res = Object.keys(data).map((item,index)=><List>
        <List.Item key={index}>{item}：{data[item]}</List.Item>
    </List>)
        
        return <Popover content={res}>{res.length}条</Popover>
    }
    getEvaluation=()=>{
        const columns=[
            {title:'评价环节',dataIndex:'evaluateStep'},
            {title:'评价类别',dataIndex:'evaluateItem',render:text=>this.showEvaluationDetail(text)},
            {title:'得分',dataIndex:'scoreTotal',render:text=>getStr(text)},
            {title:'评价时间',dataIndex:'createdAt',render:text=>text&&moment(text).format("YYYY-MM-DD")},
            {title:'评价人',dataIndex:'evaluateName'},            
            {title:'备注',dataIndex:'remark',render:text=>getStr(text)},
        ]
        return<UseTable columns={columns} getData={this.getEvaluationList} rowKey={'id'}/>
    }
    render() {
        let {panelKey} = this.state
  
        return (
            <div>
                <Collapse accordion onChange={this.onCollapseChange}>
                    <Collapse.Panel header={'项目介绍'} key={'one'}>{panelKey==='one'&&this.getone()}</Collapse.Panel>
                    <Collapse.Panel header={'参与人员'} key={'two'}>{panelKey==='two'&&this.getTwo()}</Collapse.Panel>
                    <Collapse.Panel header={'申报材料'} key={'three'}>{panelKey==='three'&&this.getThree()}</Collapse.Panel>
                    <Collapse.Panel header={'项目审批'} key={'six'}>{panelKey==='six'&&this.getRview()}</Collapse.Panel>
                    <Collapse.Panel header={'成果评价'} key={'eight'}>{panelKey==='eight'&&this.getEvaluation()}</Collapse.Panel>
                </Collapse>
            
                
            </div>
        );
    }
}

export default index;